上篇説到傳統函式This指向基本原則：呼叫時前面的物件是誰，和怎麼定義無關，但箭頭函式的This指向，完全不是這樣運作的。

箭頭函式基本認識

• ES6 新增的語法。
• 讓 JavaScript 的撰寫的更精簡。

再來看傳統函式與箭頭函式的差別:

• 傳統函式

const arr = [1,2,3,4,5];

const  filterArr = arr.filter(function(item){
  return item % 2; //除2的餘數 為真值取出來
});

• 箭頭函式

const arr = [1,2,3,4,5];

const  filterArr = arr.filter(item => item % 2 );

console.log(filterArr);

區別在於以下幾點：

• function
• 大括號 { }
• item的( )
  以上幾個都被拿掉，但是要注意 function 裡面的參數只有一個時才可以把（ ）拿掉。
  補充：箭頭函式自帶return功能，但是前提是要把{}拿掉才會生效。

再來一段範例：

var name = '全域';
const obj = {
    name: '物件',
    callName: function () {
    console.log(this.name); //物件
    setTimeout(function () {
      console.log(this.name); //全域
      console.log(this); //windows
    }, 100);
  },
};

obj.callName();

setTimeout裡面的callback function this.name指向會是全域，this 則是指向windows。

接下來改成箭頭函式：

var name = '全域';
const obj = {
    name: '物件',
    callName: function () {
    console.log(this.name); //物件
    setTimeout(() => {
      console.log(this.name); //物件
      console.log(this); //obj
    }, 100);
  },
};

obj.callName();

因為箭頭函式沒有自己的This，所以callback function This指向會變成跟外部函式作用域的This指向ㄧ樣。

假如箭頭函式外部沒有函式呢？

var name = '全域';
const obj = {
  name: '物件',
   callName: () => {
     console.log(this.name)
   }
};

obj.callName();

外部找不到函式，箭頭函式This就會指向為全域。

總結

傳統函式This指向是看呼叫函式前面的物件。
箭頭函式沒有自己的This，如果外部有函式，作用域This就會跟外部函式一樣，如果沒有外部無函式This指向則是全域。
setTimeout裡面的callback function this指向則會是windows。

明天要來講解最後一篇JavaScript的觀念篇，其他觀念則會放在其他篇小章節裡，之後就會開始Vue的篇章，敬請期待，祝大家中秋節快樂！